import React, { useEffect, useState } from 'react'
import { fetchUserList, fetchDeleteUserList, fetchEditUserItem } from '@/requests'
import { Table, Tag, Popconfirm, Modal, Form, Input, Radio } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import NetworkHeader from '@/pages/Netdisk/NetworkHeader'
import './index.less'

interface DataType {
  password: string;
  username: string;
  mobile?: string;
  sex?: string;
  userEmail?: string;
  _id: string;
}

const usePopconfirm = (getUserTableList: any) => {
  const confirm = (record: DataType) => {
    fetchDeleteUserList({ _id: record._id }).then(res => {
      console.log(res, 'res')
      getUserTableList()
    })
  };

  const cancel = (record: DataType) => {
    console.log(record)
  };
  return [confirm, cancel]
}

const UserManger: React.FC = () => {
  const [userList, setUserList] = useState([])
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [selectItem, setSelectItem] = useState<DataType>()
  const [form] = Form.useForm();

  useEffect(() => { getUserTableList() }, [])

  useEffect(() => { form.resetFields() }, [isModalOpen])

  const getUserTableList = () => {
    fetchUserList({
      username: 'admin',
      mobile: '',
      pageNum: 1,
      pageSize: 10,
    }).then(response => {
      if (!response) return
      setUserList(response?.userList)
    })
  }

  const [confirm, cancel] = usePopconfirm(getUserTableList)

  const handleOk = () => {
    form.validateFields().then(values => {
      fetchEditUserItem({
        ...values,
        _id: selectItem?._id
      }).then(res => {
        getUserTableList()
        setIsModalOpen(false)
      })
    })
  }

  const handleCancel = () => {
    setSelectItem(undefined)
    setIsModalOpen(false)
  }

  const handleEdit = (record: DataType) => {
    setSelectItem(record)
    setIsModalOpen(true)
  }

  const columns: ColumnsType<DataType> = [
    {
      title: '用户名称',
      dataIndex: 'username',
      key: 'username',
      render: text => text,
    },
    {
      title: '登陆密码',
      dataIndex: 'password',
      key: 'password',
      render: text => text,
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'mobile',
      render: text => text,
    },
    {
      title: '邮箱',
      dataIndex: 'userEmail',
      key: 'userEmail',
      render: text => text,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: text => text === undefined ? "--" : text == '0' ? "男" : "女",
    },
    {
      title: '用户操作',
      dataIndex: 'options',
      width: "300px",
      key: 'options',
      render: (text, record) => (
        <>
          <Popconfirm
            title="确定要删除该用户吗,此处删除直接清库？"
            onConfirm={() => confirm(record) as any}
            onCancel={() => cancel(record) as any}
            okText="是"
            cancelText="否"
          >
            <Tag className='tag-style' color='red'>删除用户</Tag>
          </Popconfirm>
          <Tag className='tag-style' color='blue' onClick={() => handleEdit(record)}>编辑用户</Tag>
          <Tag className='tag-style' color='grey'>禁用该用户</Tag>
        </>
      ),
    },
  ]

  const layout = { labelCol: { span: 5 }, wrapperCol: { span: 16 } };

  return (
    <>
      <NetworkHeader>用户管理</NetworkHeader>
      <Table columns={columns} dataSource={userList} rowKey={(record) => record._id} />
      <Modal title="用户编辑" visible={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          {...layout}
          form={form}
          initialValues={selectItem}
          className='register-box'>
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input disabled placeholder={"请输入用户名"} type="text" id={"username"} className="inputheight" />
          </Form.Item>
          <Form.Item
            name="password"
            label="密码"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input placeholder={"请输入密码"} type="password" id={"password"} className="inputheight" />
          </Form.Item>
          <Form.Item
            name="mobile"
            label="手机号"
          >
            <Input placeholder={"请输入手机号"} className="inputheight" />
          </Form.Item>
          <Form.Item
            name="userEmail"
            label="邮箱"
          >
            <Input placeholder={"请输入邮箱"} className="inputheight" />
          </Form.Item>
          <Form.Item
            name="sex"
            label="性别"
          >
            <Radio.Group value={"0"} options={[{ label: "男", value: "0" }, { label: "女 ", value: "1" }]}></Radio.Group>
          </Form.Item>
        </Form>
      </Modal >
    </>
  )
}

export default UserManger